import { defineComponent } from 'vue';
import { getFRC } from '@/api/home';
import SheltV2 from '../../common/SheltV2';
import ItemTable from './ItemTable';
import './index.less';
import '../../../style/index.less';
import Detail from '../../mobile/Detail';
import { isMobile } from '@/utils';

export default defineComponent({
  name: 'Welfare',
  setup() {
    const itemTableRef = ref();
    const filterDetail = reactive({
      search: { type: 1 }
    });
    const tableDetail = [
      { title: '福利', key: 'name' },
      { title: '福利值', key: 'content' },
      { title: '详情', key: 'url' }
    ];
    const detailRef = ref();
    const data = ref({ list: [] }) as AnyObject;
    getWareList();

    function getWareList() {
      getFRC({ type: 1, page: 1, pageSize: 15 }).then((res) => {
        data.value = res.data;
      });
    }
    return () => (
      <>
        <SheltV2
          title="我的福利"
          more="查看全部"
          onViewDetail={() => (isMobile()? (detailRef.value.show = true):(itemTableRef.value.dialogVisible = true))}
        >
          <ul class="welfare">
            {data.value.list.length > 0 ? (
              data.value.list?.slice(0, 2).map((_item: AnyObject) => (
                <li class="welfare_item flex-start">
                  <div class="title text-truncate">{_item.name}</div>
                  <div class="num">{_item.content}</div>
                </li>
              ))
            ) : (
              <p class="empty">暂无福利</p>
            )}
          </ul>
          <ItemTable data={data.value} type={1} ref={itemTableRef} />
        </SheltV2>
        <Detail
          title="我的福利"
          ref={detailRef}
          filterDetail={filterDetail}
          tableDetail={tableDetail}
          requestApi={getFRC}
        />
      </>
    );
  }
});
